<template>
    <Swiper v-bind="swiperOption" style="height: 200px;">
        <SwiperSlide v-for="slide in 10" :key="slide">
            <div class="main-center cross-center" style="width: 100%;height: 100%;">{{ slide }}</div>
        </SwiperSlide>
    </Swiper>
</template>
  

<script setup lang="ts">

/**
 * 通用轮播图组件(待完善)
 */

import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

const swiperOption = {
    //只有导入的组件模块才能使用对应的功能
    modules: [SwiperAutoplay, SwiperNavigation, SwiperPagination],
    autoplay: {
        delay: 8000,
    },
    loop: true,
    navigation: true,
    pagination: {
        type: 'bullets',
    },
}
</script>

<style lang='scss' scoped>
.swiper {
    z-index: 0;
}
</style>